<%--
  Created by IntelliJ IDEA.
  User: 张国庆
  Date: 2019/9/17
  Time: 13:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户统计页面</title>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/dark.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="zhexian" style="width: 600px;height:400px;"></div>
<div id="china" style="width: 600px;height:400px;"></div>
<script>
   //做初始化准备
    var mychart=echarts.init(document.getElementById("main"));
   var mychart2=echarts.init(document.getElementById("zhexian"));
    $.ajax({
        url:"user/showSexs",
        success:function (data) {
            var option={
                title:{
                    text:"用户访问统计"
                },
                //工具栏
                tooltip:{},
                legend:{
                    data:["人数"]
                },
                xAxis:{
                    data:["男","女"]
                },
                yAxis:{},
                series:[{
                    name:"人数",
                    type:"bar",
                    data:[data[0],data[1]]
                }]
            };
            mychart.setOption(option);
        }
    })
    $.ajax({
        url:"user/showDate",
        success:function (data) {
            var option2={
                title:{
                    text:"注册用户折现图"
                },
                tooltip:{},
                legend:{
                    data:["注册量"]
                },
                xAxis:{
                    data:["前一周","前两周","前三周"]
                },
                yAxis:{},
                series:[{
                    name:"注册量",
                    type:"line",
                    data:[data.count1,data.count2,data.count3]
                }]
            }
            mychart2.setOption(option2);
        }
    })


   var chain=echarts.init(document.getElementById("china"));
   $.ajax({
        url:"user/showCity",
       success:function (data) {
           var option3 = {
               title : {
                   text: '用户地区分布',
                   left: 'center'
               },
               tooltip : {
                   trigger: 'item'
               },
               legend: {
                   orient: 'vertical',
                   left: 'left',
                   data:['用户人数']
               },
               visualMap: {
                   min: 0,
                   max: 45000,
                   left: 'left',
                   top: 'bottom',
                   text:['高','低'],           // 文本，默认为数值文本
                   calculable : true
               },
               toolbox: {
                   show: true,
                   orient : 'vertical',
                   left: 'right',
                   top: 'center',
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               series : [
                   {
                       name: '用户人数',
                       type: 'map',
                       mapType: 'china',
                       roam: false,
                       label: {
                           normal: {
                               show: false
                           },
                           emphasis: {
                               show: true
                           }
                       },
                       data:data
                   }
               ]
           };
           chain.setOption(option3);
       }
   })




</script>

</body>
</html>
